<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<script>
  class SubObject {
    state = 'ooo'

    get (key) {
      if (key) return this[key]
      return this;
    }

    set (key, value) {
      this[key] = value
    }
  }

  const data = new SubObject()

  function mixinProxy(data) {

    data.__isProxy = true;

    return new Proxy(data, {
      get(target, proto, receiver) {
        return Reflect.get(target, proto, receiver);
      },

      set(target, proto, value, receiver) {

        console.log(data.state, value)
        return Reflect.set(target, proto, value, receiver);
      }
    })
  }
  const Member = mixinProxy(data)

  Member.state = 1
  Member.state = 2

  console.log(Member, Member.state)






  const members = new Map()

  members.set('aa', 'aa')
  members.set('bb', 'bb')
  members.set('cc', 'cc')
  members.set('dd', 'dd')
  members.set('ee', 'ee')

  for (const member of members) {
    console.log(member)
  }

  const memberSet = new Set()

  memberSet.add('11')
  memberSet.add('22')
  memberSet.add('33')
  memberSet.add('44')
  memberSet.add('11')

  for (const classroom of memberSet) {
    console.log(classroom)
  }
</script>
</body>
</html>
